
<template>
  <div>
    <div class="table_wrap">
      <div class="table_title">
        <i class="el-icon-platform-eleme"></i>
        <div>系统人员</div>
      </div>
      <div class="table_info">
        <el-table :data="adminList"
                  border
                  style="width:100%">
          <el-table-column prop="userName"
                           label="用户名"
                           width="180">

          </el-table-column>
          <el-table-column prop="turename"
                           label="姓名"
                           width="180">
          </el-table-column>
          <el-table-column prop="power"
                           label="后台权限"
                           width="180">
          </el-table-column>
          <el-table-column prop="phone"
                           label="手机"
                           width="180">
          </el-table-column>
          <el-table-column label="编辑日期"
                           width="280">
            <template slot-scope="scope">
              <div>
                {{new Date(scope.row.upDateAt).toLocaleString()}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName"
                           label="操作"
                           width="280">
            <template slot-scope="scope">
              <div>
                <el-button type="primary"
                           @click="edit(scope.row)">编辑</el-button>
                <el-button type="info"
                           @click="del(scope.row.tokenId)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page_wrap">
          <el-button type="primary"
                     @click="goTop">首页</el-button>
          <el-pagination :page-size="pageSize"
                         background
                         layout="prev,pager,next"
                         :total="total"
                         :current-page="pageStart"
                         @current-change="pageChange"></el-pagination>
          <el-button type="primary"
                     @click="goEnd">尾页</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  name: "admintable",
  data () {
    return {
    }
  },
  created () {
    this.getAdminAction({ pageStart: this.pageStart })//初始加载第一页数据
  },
  methods: {
    ...mapMutations("adminStore", ["changeDialogVisble", "changeEidtId", "changeTitleAndBtn", "changeEidtRow", "changePage"]),
    ...mapActions("adminStore", ["getAdminAction", "delAdminAction"]),
    edit (row) { //点击编辑  打开弹出层   存储编辑id
      this.changeDialogVisble(true)
      this.changeEidtId(row.tokenId) //储存编辑id
      this.changeTitleAndBtn(["修改管理员", "确认修改"])
      this.changeEidtRow(row) //存储当前修改行数据
    },
    del (tokenId) { //删除方法
      // 调取vuex中的actions的删除方法
      this.delAdminAction(tokenId).then(res => {
        if (res.success) {
          this.$alert("删除成功")
          this.getAdminAction({ pageStart: this.pageStart })//初始加载第一页数据
        }
      })

    },
    pageChange (val) { //页面改变事件
      // val 获取到当前页码
      console.log(val)
      this.changePage(val)//触发改变当前页码的mutations
      this.getAdminAction({ pageStart: val })
    },
    goTop () { //跳转首页的方法
      this.changePage(1)//触发改变当前页码的mutations
      this.getAdminAction({ pageStart: 1 })
    },
    goEnd () { //跳转尾 页
      this.changePage(this.endPage)//触发改变当前页码的mutations
      this.getAdminAction({ pageStart: this.endPage })
    }
  },
  computed: {
    //          命名空间名        
    ...mapGetters("adminStore", ["adminList", "pageStart", "total", "pageSize", "endPage"])
  }
}
</script>
<style lang="less">
.table_wrap {
  width: 1300px;
  margin: 20px auto;
  background: white;
  font-size: 20px;
  .table_title {
    height: 40px;
    line-height: 40px;
    display: flex;
    border: 1px solid black;
    i {
      width: 40px;
      height: 40px;
      border-right: 1px solid black;
      font-size: 40px;
    }
    div {
      margin-left: 30px;
    }
  }
}
.page_wrap {
  display: flex;
  margin-top: 10px;
  .el-button {
    height: 28px;
    line-height: 4px;
  }
}
</style>